<template>
  <div class="content">
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="KDnumber" label="快递单号" align="center"></el-table-column>
        <el-table-column prop="vipid" label="vipid" align="center"></el-table-column>
        <el-table-column prop="PicSrc" label="图片" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.PicSrc" @click="lookImg(scope.row)" type="text" size="small">查看</el-button>
            <span v-else>无图片</span>
          </template>
        </el-table-column>
        <el-table-column prop="SubmitTime" label="提交时间" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <el-table-column prop="added" label="备注" align="center"></el-table-column>
        <el-table-column fixed="right" v-if="$_permissions() == '2' || $_permissions() == '3'" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, true, true)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.start"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pagination.nums"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    ></el-pagination>
    <el-dialog append-to-body :title="look ? '查看' : '编辑'" :visible.sync="show" width="35%" @close="handleClose">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="快递单号" prop="KDnumber"><el-input :readonly="look" v-model="ruleForm.KDnumber"></el-input></el-form-item>
          <el-form-item label="服务费" prop="ServiceFee"><el-input type="number" :readonly="look" v-model="ruleForm.ServiceFee"></el-input></el-form-item>
          <el-form-item v-if="look" label="vipid" prop="vipid"><el-input :readonly="look" v-model="ruleForm.vipid"></el-input></el-form-item>
          <el-form-item label="图片" prop="PicSrc">
            <el-upload
              :disabled="look"
              :limit="10"
              :action="uploadUrl"
              list-type="picture-card"
              :file-list="fileList"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="imgupload"
              name="pic"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="ruleForm.status" :disabled="look">
              <el-option label="已付款" value="已付款"></el-option>
              <el-option label="待付款" value="待付款"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="added"><el-input type="textarea" :readonly="look" v-model="ruleForm.added"></el-input></el-form-item>
          <el-form-item v-if="!look"><el-button type="primary" @click="submitForm">保存</el-button></el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog append-to-body title="预览" :visible.sync="dialogVisible" width="40%">
      <el-image style="width: 100%" :src="dialogImageUrl" :preview-src-list="[dialogImageUrl]"></el-image>
    </el-dialog>
    <el-dialog append-to-body title="预览" :visible.sync="showImg" width="40%">
      <el-image style="width: 100%" v-for="(item, index) in imgSrc" :src="item" :key="index" :preview-src-list="imgSrc" lazy></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { showbaoguofenxiangDetails, delbaoguoqingdian, updatebaoguoqingdian, uploadUrl } from '@/api/test.js';
import pagination from '@/mixins/page.js';
export default {
  name: 'hongcaitj',
  mixins: [pagination],
  data() {
    return {
      tableData: [],
      uploadUrl: uploadUrl,
      show: false,
      look: false, //是否只读
      fileList: [],
      showImg: false,
      disabled: false,
      ruleForm: {},
      rules: {},
      imgSrc: [],
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    imgupload(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.status == 'ok') {
        this.ruleForm.PicSrc = fileList
          .map(item => {
            if (item.response) {
              return item.response.src;
            } else {
              return item.url;
            }
          })
          .join('|');
      } else {
        this.$message.error('上传失败');
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.PicSrc = fileList
        .map(item => {
          if (item.response) {
            return item.response.src;
          } else {
            return item.url;
          }
        })
        .join('|');
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    lookImg(row) {
      this.imgSrc = row.PicSrc.split('|');
      this.showImg = true;
    },
    handleClick(row, status, look) {
      //status true:编辑 false:删除
      if (status) {
        //编辑
        this.ruleForm = { ...row };
        if (row.PicSrc) {
          this.fileList = this.fileList = row.PicSrc.split('|').map(item => {
            return {
              url: item
            };
          });
        }
        if (look) {
          //仅查看
          this.look = true;
        }
        this.show = true;
      } else {
        //删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delbaoguoqingdian({ id: row.id }).then(res => {
              console.log(res);
              if (res.msg.indexOf('成功') != -1) {
                this.$message.success('删除成功');
                this.getList();
              } else {
                this.$message.error('删除失败');
              }
            });
          })
          .catch(() => {});
      }
    },
    getList() {
      //获取列表
      showbaoguofenxiangDetails(this.pagination).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.pagination.total = res.total;
      });
    },
    submitForm() {
      //提交请求
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.ruleForm.id) {
            //更新
            updatebaoguoqingdian(this.ruleForm).then(res => {
              if (res.msg.indexOf('成功') != -1) {
                this.$message.success(res.msg);
                this.handleClose();
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    handleClose() {
      //弹窗关闭回调 -- 清空表单数据
      this.ruleForm = {};
      this.show = false;
      this.look = false;
      this.$refs['ruleForm'].resetFields();
      this.fileList = [];
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.content {
  
}
</style>
